<%--
  Created by IntelliJ IDEA.
  User: dj
  Date: 2018-08-17
  Time: 9:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="/static/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/login-1.css"> 
    <link rel="stylesheet" type="text/css" href="/static/css/pagemain.css">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/js/layui/css/layui.css"/>
    <link rel="stylesheet" href="/static/js/bootstrap-3.3.5/assets/bootstrap-table/src/bootstrap-table.css"/>
    <link rel="stylesheet" href="/static/js/bootstrap-3.3.5/assets/examples.css"/>
    <link rel="stylesheet" href="/static/js/bootstrap-3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/css/my-stlye.css"/>
    <link rel="stylesheet" href="/static/js/plugins/layer/skin/layer.css"/>
    <link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui-1.5/themes/default/easyui.css">
    <script type="text/javascript" src="/static/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-3.3.5/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/js/easyuiPager.js"></script>
    <script type="text/javascript" src="/static/js/jquery-easyui-1.5/datagrid-filter.js"></script>
    <script type="text/javascript" src="/static/js/plugins/layer/layer.js"></script>
    <script type="text/javascript" src="/static/js/my97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/static/js/dlchart.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/common.js"></script>
    <script type="text/javascript" src="/static/js/my97DatePicker/WdatePicker.js"></script>


    <title>患者时序图</title>
    <script type="text/javascript">

        $(function () {
            var date = $.getdate.getPresentDate();
			var now = new Date();
            now.addDays(-15);//加减日期操作	 
            $("#yyinfo").height(300);
            $("#ssinfo").height(300);
            $("#zlczinfo").height(300);
            $("#jyinfo").height(300);
            $('#srq').val(now.format("yyyy-MM-dd"));
            $('#erq').val(date); 
            search();
			var myurl = new objURL();
            var strblh = myurl.get('blh');  
            var strzyh = myurl.get('zyh');  
            
     
            //tab标签的点击状态
            $('#qbzb li a').click(function () {
                $(this).parent('li').siblings('li').children('a').removeClass('active');
                $(this).addClass('active');
                $('#ischange').removeClass('checked');
                $("[name=items]:checkbox").prop("checked", false);
                if ($(this).attr('id') == 'a1') {
                    $('#tabx1').show();
                    $('#tabx2').hide();
                    $('#tabx3').hide();
                    $('#tabx4').hide();
                    $('#tabx5').hide();
                    $('#tabx6').hide();
                } else if ($(this).attr('id') == 'a2') {

                    $('#tabx1').hide();
                    $('#tabx2').show();
                    $('#tabx3').hide();
                    $('#tabx4').hide();
                    $('#tabx5').hide();
                    $('#tabx6').hide();
                    //用药信息
                    inityyinfoGrid();
                    $.getJSON("/commapiV2", {
                        p_dm: "THZ_YYINFO_GetByblh",
                        blh: strblh
                    }, function (data) {
                        if (data.success) {
                            var griddata = {};
                            griddata.rows = data.Table;
                            griddata.total = data.totalcount;
                            $('#yyinfo').datagrid('loadData', griddata);
                        }
                    }, true);
                }
                else if ($(this).attr('id') == 'a3') {

                    $('#tabx1').hide();
                    $('#tabx2').hide();
                    $('#tabx3').show();
                    $('#tabx4').hide();
                    $('#tabx5').hide();
                    $('#tabx6').hide();
                    initssinfoGrid();
                    $.getJSON("/commapiV2", {
                        p_dm: "Thz_ssinfo_getbyblh",
                        blh: strblh
                    }, function (data) {
                        if (data.success) {
                            var griddata = {};
                            griddata.rows = data.Table;
                            griddata.total = data.totalcount;
                            $('#ssinfo').datagrid('loadData', griddata);
                        }
                    }, true);
                }
                else if ($(this).attr('id') == 'a4') {
                    $('#tabx1').hide();
                    $('#tabx2').hide();
                    $('#tabx3').hide();
                    $('#tabx4').show();
                    $('#tabx5').hide();
                    $('#tabx6').hide();
                    initzlczinfoGrid();
                    $.getJSON("/commapiV2", {
                        p_dm: "Thz_zlcz_get",
                        blh: strblh
                    }, function (data) {
                        if (data.success) {
                            var griddata = {};
                            griddata.rows = data.Table;
                            griddata.total = data.totalcount;
                            $('#zlczinfo').datagrid('loadData', griddata);
                        }
                    }, true);
                }
                else if ($(this).attr('id') == 'a5') {
                    $('#tabx1').hide();
                    $('#tabx2').hide();
                    $('#tabx3').hide();
                    $('#tabx4').hide();
                    $('#tabx5').show();
                    $('#tabx6').hide();
                    $.getJSON("/commapiV2", {
                        p_dm: "THZ_Grbjw_Get",
                        blh: strblh,
                        jyxm: "血常规白细胞",
                    }, function (data) {
                        if (data.success) {
                            var X = new Array();
                            var Y = new Array();
                            $.each(data.Table, function (i, obj) {
                                X.push(obj.cysj);
                                Y.push(obj.jyjg);
                            })
                            SetxcgData(X, Y);
                        }
                    }, true);
                }
                else if ($(this).attr('id') == 'a6') {
                    $('#tabx1').hide();
                    $('#tabx2').hide();
                    $('#tabx3').hide();
                    $('#tabx4').hide();
                    $('#tabx5').hide();
                    $('#tabx6').show();
                    initjyinfoGrid();
                    $.getJSON("/commapiV2", {
                        p_dm: "Thz_byxjg_getByzyh",
                        zyh: strzyh
                    }, function (data) {
                        if (data.success) {
                            var griddata = {};
                            griddata.rows = data.Table;
                            griddata.total = data.totalcount;
                            $('#jyinfo').datagrid('loadData', griddata);
                        }
                    }, true);

                }
            });
        })

        function search(){ 
        var myurl = new objURL();
        var strblh = myurl.get('blh');
		//时序图
            $.getJSON("/commapiV2", {
                p_dm: "Thz_jbxx_Getsxt",
                blh: strblh,
                Sdate: $('#srq').val(),
                Edate: $('#erq').val()
            }, function (data) {
                if (data.success) {
                    var griddata = {};
                    griddata.rows = data.Table;
                    griddata.total = data.totalcount;
                    var columns = CreateColumn(data.Table[0]);//获取表头
                    initGrid(columns);
                    $('#l_datagrid').datagrid('loadData', griddata);
                }
            }, true);
			//体温单
            $.getJSON("/commapiV2", {
                p_dm: "Thz_tw_get",
                blh: strblh,
                Sdate: $('#srq').val(),
                Edate: $('#erq').val()
            }, function (data) {
                if (data.success) {
                    var X = new Array();
                    var Y = new Array();
                    $.each(data.Table, function (i, obj) {
                        X.push(obj.clsj);
                        Y.push(obj.tw);
                    })
                    SetData(X, Y);
                }
            }, true);
		}
        function CreateColumn(titles) {
            var columns = new Array(); //定义列集合 
            var column1 = {};
            column1["title"] = "项目";//我这里默认用键值做title，一般可以根据键值自定义
            column1["width"] = 90;
            column1["field"] = "xm";//数据的键值就是field
            column1["align"] = "left";
            columns.push(column1);//放入定义数组
            $.each(titles, function (i, v) {
                var column = {};
				if(i!="xm"){ 
                    column["title"] = i;//我这里默认用键值做title，一般可以根据键值自定义
                    column["width"] = 40;
                    column["field"] = i;//数据的键值就是field
                    column["align"] = "center";
                    column["formatter"] = function (value, row, index) {
                        if (value && index == 0) {
                            return "<img src='/static/img/sxt/twj.ico'>";
                        }
                        else if (value && index == 1) {
                            return "<img src='/static/img/sxt/kjyw.png'>";
                        }
                        else if (value && index == 2) {
                            return "<img src='/static/img/sxt/ss.ico'>";
                        }
                        else if (value && index == 3) {
                            return "<img src='/static/img/sxt/hxj.ico'>";
                        }
						else if (value && index == 4) {
                            return "<img src='/static/img/sxt/zxjmcg.ico'>";
                        }
						else if (value && index == 5) {
                            return "<img src='/static/img/sxt/mndcg.ico'>";
                        }
						else if (value && index == 6) {
                            return "<img src='/static/img/sxt/xcg.ico'>";
                        }
						else if (value && index == 7) {
                            return "<img src='/static/img/sxt/sj.ico'>";
                        }
                        else if (value && index == 8) {
                            return "<img src='/static/img/sxt/yj.ico'>";
                        }
						else {
                            return "";
                        }
                    };
                columns.push(column);//放入定义数组
				}
            });
            return columns;
        }
        function initGrid(column) {
            $('#l_datagrid').datagrid({
                rownumbers: true,//显示行号
                singleSelect: true,//只显示一行
                pagination: false,//启用分页
                fitColumns: true,
                sortable: true, //启用排序列
                collapsible: true,
                idField: 'grid',
                columns: [
                    column
                ],
                onDblClickCell: function (index, field, value) {
                    var row = $('#l_datagrid').datagrid('getSelected');
                    alert(row.xm);
                }
            }).datagrid('clientPaging');
        }
        function SetData(Xdata, Ydata) {
            var myChart = echarts.init(document.getElementById("dataTwd"));
            option = {
                xAxis: {
                    type: 'category',
                    data: Xdata
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    max: 40,
                    min: 35
                },
                series: [{
                    data: Ydata,
                    type: 'line',
                    markLine: {
                        data: [
                            {yAxis: '37.5', name: '警戒值'}
                        ]
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        function inityyinfoGrid() {
            $('#yyinfo').datagrid({
                fit: false, //自动适屏功能
                rownumbers: true,//显示行号
                singleSelect: true,//只显示一行
                pagination: true,//启用分页
                remoteSort: false,
                clientPaging: false,
                fitColumns: true,
                sortable: true, //启用排序列
                collapsible: true,
                idField: 'blh',
                pageSize: 10,
                pageList: [10, 30, 50],
                columns: [
                    [
                        {field: 'blh', title: '病例号', hidden: true},
                        {field: 'zyh', title: '住院号', hidden: true},
                        {field: 'zycs', title: '住院次数', hidden: true},
                        {field: 'kjywmc', title: '用药信息', width: '180px', align: 'center',},
                        {field: 'kssj', title: '开始时间', width: '130px', align: 'center'},
                        {field: 'jssj', title: '结束时间', width: '130px', align: 'center'},
                        {field: 'yymd', title: '用药目的', width: '60px', align: 'center'},
                        {field: 'yytj', title: '用药途径', width: '200px', align: 'center'},
                        {field: 'kjywjb', title: '抗菌药物级别', width: '120px', align: 'center'},
                        {field: 'yzbh', title: '医嘱编号', hidden: true}
                    ]
                ]
            }).datagrid('clientPaging');
        }
        function initssinfoGrid() {
            $('#ssinfo').datagrid({
                fit: false, //自动适屏功能
                rownumbers: true,//显示行号
                singleSelect: true,//只显示一行
                pagination: true,//启用分页
                remoteSort: false,
                clientPaging: false,
                fitColumns: true,
                sortable: true, //启用排序列
                collapsible: true,
                idField: 'ssbh',
                pageSize: 10,
                pageList: [10, 30, 50],
                columns: [
                    [
                        {field: 'blh', title: '病例号', hidden: true},
                        {field: 'zyh', title: '住院号', hidden: true},
                        {field: 'zycs', title: '住院次数', hidden: true},
                        {field: 'ssbh', title: '手术编号', hidden: true},
                        {field: 'ssmc', title: '手术名称', width: '180px', align: 'center'},
                        {field: 'sskssj', title: '开始时间', width: '130px', align: 'center'},
                        {field: 'ssjssj', title: '结束时间', width: '130px', align: 'center'},
                        {field: 'cxsj', title: '手术持续时间', width: '60px', align: 'center'},
                        {field: 'qklx', title: '切口类型', width: '90px', align: 'center'},
                        {field: 'yhdj', title: '愈合等级', width: '90px', align: 'center'},
                        {field: 'ASA', title: 'AsA评分', width: '90px', align: 'center'},
                        {field: 'nnis', title: 'NNIS分级', width: '60px', align: 'center'},
                        {field: 'jzzq', title: '急诊择期', width: '60px', align: 'center'},
                        {field: 'cxl', title: '出血量', width: '60px', align: 'center'},
                        {field: 'ssys', title: '手术医生', width: '60px', align: 'center'},
                        {field: 'mzlx', title: '麻醉类型', width: '90px', align: 'center'},
                        {field: 'zrw', title: '植入物', width: '60px', align: 'center'},
                        {field: 'sq_kjyw', title: '术前预防使用抗菌药物', width: '120px', align: 'center'},
                        {field: 'ts_kjyw', title: '术前预防使用抗菌药物天数', width: '120px', align: 'center'},
                        {field: 'sxl_kjyw', title: '失血量大于1500ML且术中追加抗菌药物', width: '120px', align: 'center'},
                        {field: 'sqbxs_kjyw', title: '术前0.5-2小时使用抗菌药物', width: '120px', align: 'center'},
                        {field: 'sc_kjyw', title: '手术时长大于3小时术中追加抗菌药物', width: '120px', align: 'center'},
                        {field: 'sh24_kjyw', title: '术后24H停止使用抗菌药物', width: '120px', align: 'center'}
                    ]
                ]
            });
        }
        function initzlczinfoGrid() {
            $('#zlczinfo').datagrid({
                fit: false, //自动适屏功能
                rownumbers: true,//显示行号
                singleSelect: true,//只显示一行
                pagination: true,//启用分页
                remoteSort: false,
                clientPaging: false,
                fitColumns: true,
                sortable: true, //启用排序列
                collapsible: true,
                idField: 'yzid',
                pageSize: 10,
                pageList: [10, 30, 50],
                columns: [
                    [
                        {field: 'blh', title: '病例号', hidden: true},
                        {field: 'zyh', title: '住院号', width: '80px', align: 'center'},
                        {field: 'zycs', title: '住院次数', hidden: true},
                        {field: 'yzid', title: '医嘱编号', hidden: true},
                        {field: 'qxmc', title: '器械名称', width: '180px', align: 'center'},
                        {field: 'qxkssj', title: '器械使用开始时间', width: '130px', align: 'center'},
                        {field: 'qxjssj', title: '器械使用结束时间', width: '130px', align: 'center'},
                        {field: 'yznr', title: '医嘱内容', width: '180px', align: 'center'}
                    ]
                ]
            });
        }
        function initjyinfoGrid() {
            $('#jyinfo').datagrid({
                fit: false, //自动适屏功能
                rownumbers: true,//显示行号
                singleSelect: true,//只显示一行
                pagination: true,//启用分页
                remoteSort: false,
                clientPaging: false,
                fitColumns: true,
                sortable: true, //启用排序列
                collapsible: true,
                idField: 'yzid',
                pageSize: 30,
                pageList: [10, 30, 50],
                columns: [
                    [
                        {field: 'blh', title: '病例号', hidden: true},
                        {field: 'jyid', title: '检验ID', hidden: true},
                        {field: 'zyh', title: '住院号', width: '80px', align: 'center'},
                        {field: 'zycs', title: '住院次数', width: '80px', align: 'center'},
                        {field: 'jgid', title: '结果ID', hidden: true},
                        {field: 'bbmc', title: '标本名称', width: '130px', align: 'center'},
                        {field: 'cysj', title: '采样时间', width: '130px', align: 'center'},
                        {field: 'bytjg', title: '检验结果', width: '180px', align: 'center'},
                        {field: 'bgsj', title: '报告时间', width: '180px', align: 'center'},
                        {field: 'sjks', title: '送检科室', width: '180px', align: 'center'},
                    ]
                ]
            }).datagrid('clientPaging');
        }
        function SetxcgData(Xdata, Ydata) {
            var myChart = echarts.init(document.getElementById("dataxcgbxb"));
            option = {
                xAxis: {
                    type: 'category',
                    data: Xdata
                },
                yAxis: {
                    type: 'value',
                    scale: true
                },
                series: [{
                    data: Ydata,
                    type: 'line',
                    markLine: {
                        data: [
                            {yAxis: '10', name: '警戒值'}
                        ]
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>
</head>
<body>

<div class="top-demand" id="top-demand" style="top: 0px;">
    <div style="height: auto;">
        <ul id="topdiv" style="margin-bottom: 0px; float: left; line-height: 40px">
            <label>日期：</label>
            <input type="text" class="Wdate" id="srq"
                   style="width: 120px;height: 28px;vertical-align: middle;margin-bottom: 3px;border-radius:2px;border: 1px solid #ddd !important"
                   onfocus="WdatePicker({el:'srq',startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'%y'})">
			<input type=" text" class="Wdate" id="erq" style="width: 120px;height: 28px;vertical-align:
            middle;margin-bottom: 3px;border-radius:2px;border: 1px solid #ddd !important"
            onfocus="WdatePicker({el:'erq',startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'%y'})"ss>
        </ul>
        <div class="top-btn" onclick="search()">查询</div>
    </div>
</div>
<div id="item2" class="man-c-2" style="padding: 0px; width: 100%; margin-top: 47px;">
    <div style="overflow: hidden;height:250px; ">
        <table id="l_datagrid" class="datagrid" style="width: 900px;"></table>
    </div>
</div>
<div id="item5" class="man-c-2">
    <div class="bg-f" style="overflow: hidden;height:auto">
        <div class="zhibiao-top back-zb">
            <b class="back-b">明细</b>
            <ul id="qbzb">
                <li><a class="active" id="a1">体温</a></li>
                <li><a id="a2">用药</a></li>
                <li><a id="a3">手术</a></li>
                <li><a id="a4">操作</a></li>
                <li><a id="a5">血常规</a></li>
                <li><a id="a6">送检</a></li>
            </ul>
        </div>
    </div>
    <div class="col-xs-6 zhibiao2" style="width: 100%;" id="tabx1">
        <div class="zhibiao2 table-div" id="dataTwd" style="height:350px;">
        </div>
    </div>
    <div class="col-xs-6 zhibiao2" style="width: 100%; heght:350px ;display: none;padding-top: 10px" id="tabx2">
        <table id="yyinfo" class="datagrid" style="width:100%"></table>
    </div>
    <div class="col-xs-6 zhibiao2" style="width: 100%; heght:350px ;display: none;padding-top: 10px" id="tabx3">
        <table id="ssinfo" class="datagrid" style="width:100%"></table>
    </div>
    <div class="col-xs-6 zhibiao2" style="width: 100%; heght:350px ;display: none;padding-top: 10px" id="tabx4">
        <table id="zlczinfo" class="datagrid" style="width:100%"></table>
    </div>
    <div class="col-xs-6 zhibiao2" style="width: 100%; heght:350px ;display: none;padding-top: 10px" id="tabx5">
        <div class="zhibiao2 table-div" id="dataxcgbxb" style="height:350px;">
        </div>
    </div>
    <div class="col-xs-6 zhibiao2" style="width: 100%; heght:350px ;display: none;padding-top: 10px" id="tabx6">
        <table id="jyinfo" class="datagrid" style="width:100%"></table>
    </div>
</body>
</html>
